<template>
  <div
    class="app"
    v-show="isShow"
  >
    <div class="top">
      <topBackBar
        Text="编辑资料"
        @click="$router.push({ name: 'Mycenter' })"
      ></topBackBar>
      <div class="topImg">
        <div class="img">
          <img
            :src="userData.head_img.indexOf('http')>-1?userData.head_img:('http://localhost:3000' + userData.head_img)"
            alt=""
            v-if="userData.head_img"
          />
          <img
            src="../../assets/logo.png"
            alt=""
            v-else
          />

          <van-uploader
            :after-read="afterRead"
            class="updateImg"
          />
        </div>
      </div>
    </div>
    <div class="bottom">
      <divBar
        textLeft="昵称"
        :textRight="userData.nickname"
        @handleClick="isNickname = true"
      ></divBar>
      <divBar
        textLeft="密码"
        textRight="******"
        @handleClick="isPassword = true"
      ></divBar>
      <divBar
        textLeft="性别"
        :textRight="userData.gender == 1 ? '男' : '女'"
        @handleClick="isGender = true"
      ></divBar>
    </div>

    <van-dialog
      v-model="isNickname"
      title="修改昵称"
      show-cancel-button
      @confirm="updateNick"
    >
      <van-field
        v-model="Nickname"
        label="昵称"
        placeholder="请输入修改的昵称"
      />
    </van-dialog>

    <van-dialog
      v-model="isPassword"
      title="修改密码"
      show-cancel-button
      @confirm="updatePwd"
    >
      <van-field
        v-model="Password"
        type="password"
        label="密码"
        placeholder="请输入修改的密码"
      />
    </van-dialog>

    <van-action-sheet
      v-model="isGender"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import divBar from '../../components/ProjectBar'
import topBackBar from '../../components/topBackBar'

export default {
  data () {
    return {
      userData: '',
      isShow: false,
      isNickname: false,
      isPassword: false,
      isGender: false,
      Nickname: '',
      Password: '',

      imgsrc: '',

      actions: [
        { name: '小哥哥', gender: 1 },
        { name: '小姐姐', gender: 0 }
      ]
    }
  },
  methods: {
    init () {
      this.$axios({
        url: `/user/${window.localStorage.getItem('userId')}`,
        method: 'GET'
      }).then(res => {
        console.log(res)
        if (res.data.data) {
          this.isShow = true
          this.userData = res.data.data
        }
      })
    },
    update (newData) {
      this.$axios({
        url: `/user_update/${window.localStorage.getItem('userId')}`,
        method: 'POST',
        data: newData
      }).then(res => {
        if (res.statusText === 'OK') {
          this.$toast.success('修改成功')
          this.init()
        } else {
          this.$toast.success('修改失败')
        }
      })
    },
    updateNick () {
      if (this.Nickname.trim().length <= 0) {
        return 1
      }
      this.update({ nickname: this.Nickname })
      this.Nickname = ''
    },
    updatePwd () {
      if (this.Password.trim().length <= 0) {
        return 1
      }
      this.update({ password: this.Password })
      this.Password = ''
    },
    onSelect (content) {
      this.update({ gender: content.gender })
      this.isGender = false
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      const data = new FormData()
      data.append('file', file.file)

      this.$axios({
        url: '/upload',
        method: 'post',
        data: data
      }).then(res => {
        console.log(res)
        this.imgsrc = this.$axios.defaults.baseURL + res.data.data.url
        this.update({ head_img: this.imgsrc })
      })
    }
  },
  components: {
    divBar,
    topBackBar
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="less" scoped>
.app {
  height: 100vh;
}
.top {
  margin: 0 20/360 * 100vw;
  height: 120/360 * 100vw;

  .topImg {
    display: flex;
    justify-content: center;
    align-items: center;
    .img {
      // width: 70/360 * 100vw;
      // height: 70/360 * 100vw;
      position: relative;
      border-radius: 50%;
      overflow: hidden;
      img {
        // object-fit: contain;
        width: 70/360 * 100vw;
        height: 70/360 * 100vw;
        object-fit: cover;
      }
      .updateImg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
    }
  }
}
</style>
